<template>
  <div id="app">
      <!-- 头部 -->
    <v-header class="header"></v-header>
    <!-- 一级路由出口 -->
    <div class="layout main">
      <router-view />
    </div>
    <!-- 底部 -->
    <v-footer class="footer"></v-footer>
  </div>
</template>

<script>
import vHeader from "./components/header.vue";
import vFooter from "./components/footer.vue";
export default {
  name: "App",
  components: {
    vHeader,
    vFooter,
  },
};
</script>

<style>
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.main {
  /* background-color: rgb(189, 219, 132); */
  /* main 高度填充flex剩余高 */
  flex: 1;
  /* background: url(./assets/img/main_bg2.jpeg) no-repeat center; */
  /* background-size: 100% 100%; */
}
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  background-color: #589aa0 ;
  color: #ffd04b ;
}
</style>
